<div class="che-select">
  <!-- Mobile version -->
  <md-input-container class="che-select-mobile" hide-gt-xs>
    <label ng-if="labelName">{{value ? labelName : placeHolder}}</label>
    <md-select ng-model="value"
               md-container-class="che-custom-dropdown"
               placeholder="{{placeHolder}}">
      <md-option ng-value="optionValue.id ? optionValue.id : optionValue.name"
                 ng-repeat="optionValue in optionValues">{{ optionValue.name }}
      </md-option>
    </md-select>
  </md-input-container>

  <!-- Desktop version -->
  <div class="che-select-desktop" hide-xs layout="column" flex>
    <div layout="row" flex layout-align="start start">
      <label flex="15" ng-if="labelName">{{labelName}}: </label>

      <div layout="column" class="che-select-container" flex="{{labelName ? 85 : 'none'}}">
        <md-select ng-model="value"
                   md-container-class="che-custom-dropdown"
                   placeholder="{{placeHolder}}">
          <md-option ng-value="optionValue.id ? optionValue.id : optionValue.name"
                     ng-repeat="optionValue in optionValues">{{ optionValue.name }}
          </md-option>
        </md-select>
      </div>
    </div>
  </div>
</div>
